import React, { lazy } from "react"
import { WapHomeO, AppsO, CartO, UserCircleO } from "@react-vant/icons";
import { Navigate } from 'react-router-dom'
const MainLayOut = lazy(() => import('../pages/MainLayOut'))
const Home = lazy(() => import('../pages/Home'))
const Classify = lazy(() => import('../pages/Classify'))
const ShopCar = lazy(() => import('../pages/ShopCar'))
const My = lazy(() => import('../pages/My'))
const Search = lazy(() => import('../pages/Search'))
const Detail = lazy(() => import('../pages/Detail'))
const Order = lazy(() => import('../pages/Order'))
const PayResult = lazy(() => import('../pages/PayResult'))

export const mainLayOutChildren = [
  {
    path: 'home',
    element: <Home />,
    icon: <WapHomeO />,
    title: '首页'
  },
  {
    path: 'classify',
    element: <Classify />,
    icon: <AppsO />,
    title: '分类'
  },
  {
    path: 'shopCar',
    element: <ShopCar />,
    icon: <CartO />,
    title: '购物车'
  },
  {
    path: 'my',
    element: <My />,
    icon: <UserCircleO />,
    title: '我的'
  },
  {
    path: '/',
    element: <Navigate to='home' />,
    hidden: true
  }
]

const Routes = [
  {
    path: '/',
    element: <MainLayOut />,
    children: mainLayOutChildren
  },
  {
    path: '/search',
    element: <Search />,
  },
  {
    path: '/detail/:id',
    element: <Detail />,
  },
  {
    path: '/order',
    element: <Order />,
  },
  {
    path: '/pay/result',
    element: <PayResult />,
  },
]

export default Routes